<template>
  <div>
    <Breadcrumb :style="{margin: '15px 0',float: 'left'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>订单核销</BreadcrumbItem>
    </Breadcrumb>
    <Content class="layer-content center">
      <Form style="width: 60%;position:relative;top:-20%">
        <FormItem>
          <Input size="large" search enter-button v-model="shopOrderId" placeholder="请输入订单号" @on-search="doSearch" @submit.native.prevent/>
        </FormItem>
        <Row :gutter="16" v-for="(item,index) in dataGrid" :key="index">
          <Col flex="1"><Avatar :src="item.goodsImg" shape="square" size="large" /></Col>
          <Col flex="7">{{item.goodsName}}</Col>
          <Col flex="1">{{item.goodsQty+item.skuUom}}</Col>
          <Col flex="1">￥{{item.actualAmt}}</Col>
        </Row>
        <FormItem>
          <Button class="middle_btn" type="primary" @click="Submit">点击核销</Button>
        </FormItem>
      </Form>
    </Content>
  </div>
</template>
<script>
export default {
  name: "WriteOff",
  data() {
    return {
      shopOrderId: null,
      dataGrid: []
    }
  },

  created() {

  },

  methods: {
    doSearch() {
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-order',
        url: '/v1.0/mall/goods/order/detail/page',
        query: {
          equal: {
            shopOrderId: this.shopOrderId,
            shopId: this.$store.getShop('shopId')
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataGrid = res.data.data.list
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
    },
    Submit() {
      if(!this.shopOrderId) {
        this.$Message.error('订单号不能为空')
        return null
      }
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-shop",
        url: "/v1.0/agromall/write/off/order/status",
        data: {
          pojo: this.shopOrderId
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success('核销成功')
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).post()
    }
  },
};
</script>
<style lang="less" scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>